<template>
  <div class="follow-list-container">
    <m-header title="跟单">
      <img class="rximg" @click="$router.push({path: 'follow/rule'})" slot="right" src="../../../assets/imgs/icon-rule@2x.png" alt="">
      <img class="searchimg" slot="right" src="../../../assets/imgs/icon-search@2x.png" @click="showSearch=!showSearch" alt="">
    </m-header>
    <div class="follow-infos">
      <scroller :on-refresh="refresh" :on-infinite="infinite">
        <!-- <x-header class="custom-header" title="跟单">
          <img class="lximg" slot="overwrite-left" src="../../../assets/imgs/icon-back@2x.png" alt="">
          <img class="rximg" slot="right" src="../../../assets/imgs/icon-rule@2x.png" alt="">
        </x-header> -->
        <cate-cell
          imgWidth="0.3rem"
          :img="require('../../../assets/imgs/icon-group@2x.png')"
          title="大神推荐"
          desc=""
        ></cate-cell>
        <div class="fllow-user-list" v-if="followUserList.length">
          <ul class="user-list">
            <li class="user-item" v-for="(item, index) in followUserList" :key="index"
              @click="$router.push({path: `/follow/user/${item.member_id}`})">
              <div class="info">
                <img class="avator" :src="item.avatar" alt="">
                <div class="nums">{{item.today_bill_num || 1}}</div>
              </div>
              <div class="name">{{item.nickname}}</div>
            </li>
          </ul>
        </div>
        <!-- <scroller :on-refresh="refresh" :on-infinite="infinite"> -->
        <div class="fllow-list vtop" v-if="followBillList.length"
          :class="{'loaded-data': followBillList.length < 2, 'loadmore-data': followBillList.length < 5}" >
          <!-- <div class="fllow-item">
            <div class="fllow-info">
              <img class="avator" src="../../../assets/imgs/home/home_menu2@2x.png" alt="">
              <div class="base-info">
                <div class="info">
                  <span class="name">彩蛋爷爷</span>
                  <span class="time">截止:11-07 11:25</span>
                </div>
                <div class="tags">
                  <img class="icons" src="../../../assets/imgs/home/icon-hot1@2x.png" alt="">
                  <span class="orange">2串1</span>
                  <span class="red">近5中5</span>
                  <span class="blue">命中:95%</span>
                </div>
                <div class="desc">百中百发，快来和我一起赚钱吧！</div>
              </div>
            </div>
            <ul class="fllow-detail">
              <li>自购 <span>¥ 1000</span></li>
              <li>起跟 <span>¥ 50</span></li>
              <li>人数 <span>¥ 1345</span></li>
              <li><span class="fllow-btn" @click="$router.push({ path: `/follow/detail/${1}` })">跟单</span></li>
            </ul>
          </div> -->
          <div class="fllow-item" v-for="(item, index) in followBillList" :key="index">
            <div class="fllow-info" @click="$router.push({ path: `/follow/user/${item.sponsor_id}` })">
              <img class="avator" :src="item.sponsor_avatar" alt="">
              <div class="base-info">
                <div class="info">
                  <span class="name">{{item.sponsor_nickname}}</span>
                  <span class="time" v-if="item.end_time">截止:{{item.end_time}}</span>
                </div>
                <div class="tags">
                  <img class="icons" v-if="item.lottery_type==2" src="../../../assets/imgs/home/icon-hot2@2x.png" alt="">
                  <img class="icons" v-else src="../../../assets/imgs/home/icon-hot1@2x.png" alt="">
                  <div class="mode">
                    <span class="orange" v-if="item.return_money_tag">{{item.return_money_tag}}</span>
                    <span class="red" v-if="item.five_tag">{{item.five_tag}}</span>
                    <span class="blue" v-if="item.hit_rate_tag">{{item.hit_rate_tag}}</span>
                    <!-- <span class="orange">2串1</span>
                    <span class="red">近5中5</span>
                    <span class="blue">命中:95%</span> -->
                  </div>
                </div>
                <div class="desc" v-if="item.desc">{{item.desc}}</div>
                <div class="desc" v-else>百中百发，快来和我一起赚钱吧！</div>
              </div>
            </div>
            <ul class="fllow-detail">
              <li>自购 <span>¥ {{item.total_price}}</span></li>
              <li>起跟 <span>¥ {{item.min_price}}</span></li>
              <li>人数 <span>{{item.person_num}}</span></li>
              <!-- <li v-if="item.is_bet==1"><span class="fllow-btn" @click="$router.push({ path: `/follow/detail/${item.bill_id}` })">跟单</span></li> -->
              <li ><span class="fllow-btn" @click="$router.push({ path: `/follow/detail/${item.bill_id}` })">跟单</span></li>
            </ul>
          </div>
        </div>
      </scroller>
    </div>
    <div class="no-data" v-if="showNodatas">
      <img src="../../../assets/imgs/icon-noattention@2x.png" alt="">
      <div class="desc">暂无数据</div>
    </div>
    <follow-search :show="showSearch" @close="handleSearch"></follow-search>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import CateCell from '@/components/CateCell';
import FollowSearch from './FollowSearch';

export default {
  components: {
    CateCell,
    FollowSearch
  },
  data () {
    return {
      pageNum: 1,
      isPull: false, // 下拉
      loading: true,
      showSearch: false,
      isSearch: false,
      searchNoData: false,
      doneEvent: null,
      nickname: '',
      followUserList: [
        // {
        //   member_id: '1',
        //   nickname: '嘻嘻啊',
        //   avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        //   rate: '70.00%',
        //   bonus_total_price: '22.50'
        // },
        // {
        //   member_id: '1',
        //   nickname: '嘻嘻啊',
        //   avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        //   rate: '50.00%',
        //   bonus_total_price: '2034.00'
        // },
        // {
        //   member_id: '1',
        //   nickname: '嘻嘻啊',
        //   avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        //   rate: '20.00%',
        //   bonus_total_price: '111.43'
        // },
        // {
        //   member_id: '1',
        //   nickname: '嘻嘻啊',
        //   avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        //   rate: '',
        //   bonus_total_price: '1024.50'
        // },
        // {
        //   member_id: '1',
        //   nickname: '嘻嘻啊',
        //   avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        //   rate: '45.87%',
        //   bonus_total_price: '88.98'
        // },
        // {
        //   member_id: '1',
        //   nickname: '嘻嘻啊',
        //   avatar: 'http://img.try255.com/ac953e6bde51ab1ac806bc8c1fcff4f5?x-oss-process=image/quality,q_95',
        //   rate: '45.87%',
        //   bonus_total_price: '88.98'
        // }
      ],
      followBillList: [
        // {
        //   'bill_id': 3,
        //   'lottery_type': '1',
        //   'desc': '百发百中，快来和我一起赚钱吧！',
        //   'sponsor_id': '1',
        //   'sponsor_nickname': '嘻嘻啊1',
        //   'sponsor_avatar': 'https://www.try255.com/statics/avatar/1_160.png',
        //   'lottery_name': '竞彩足球',
        //   'total_price': '2',
        //   'straight_price': '2',
        //   'min_price': '2',
        //   'end_time': ' ',
        //   'person_num': 0,
        //   'mode_tag': '二串一',
        //   'five_tag': '近5中1',
        //   'hit_rate_tag': '命中:20%',
        //   'is_bet': 0
        // },
        // {
        //   'bill_id': 2,
        //   'lottery_type': '1',
        //   'desc': '百发百中，快来和我一起赚钱吧！',
        //   'sponsor_id': '1',
        //   'sponsor_nickname': '嘻嘻啊1',
        //   'sponsor_avatar': 'https://www.try255.com/statics/avatar/1_160.png',
        //   'lottery_name': '竞彩足球',
        //   'total_price': '2',
        //   'straight_price': '2',
        //   'min_price': '2',
        //   'end_time': ' ',
        //   'person_num': 0,
        //   'mode_tag': '二串一',
        //   'five_tag': '近5中1',
        //   'hit_rate_tag': '命中:20%',
        //   'is_bet': 0
        // },
        // {
        //   'bill_id': 1,
        //   'lottery_type': '1',
        //   'desc': '百发百中，快来和我一起赚钱吧！',
        //   'sponsor_id': '1',
        //   'sponsor_nickname': '嘻嘻啊1',
        //   'sponsor_avatar': 'https://www.try255.com/statics/avatar/1_160.png',
        //   'lottery_name': '竞彩足球',
        //   'total_price': '2',
        //   'straight_price': '2',
        //   'min_price': '2',
        //   'end_time': ' ',
        //   'person_num': 0,
        //   'mode_tag': '二串一',
        //   'five_tag': '近5中1',
        //   'hit_rate_tag': '命中:20%',
        //   'is_bet': 0
        // }
      ]
    }
  },
  computed: {
    showNodatas () {
      return !this.loading && (this.searchNoData || (!this.followUserList.length && !this.followBillList.length));
    }
  },
  mounted () {
    this.followInfo(); // 大神推荐
    // this.getDatas(); // 跟单列表
  },
  deactivated () {
    this.showSearch = false;
  },
  methods: {
    ...mapActions({
      getFollowMemberList: 'follow/getFollowMemberList',
      getFollowBillList: 'follow/getFollowBillList'
    }),
    handleSearch (nickname) {
      this.isPull = true;
      this.pageNum = 1;
      this.loading = true;
      this.followBillList = [];
      if (nickname) {
        this.nickname = nickname;
      } else {
        this.nickname = '';
      }
      this.isSearch = true;
      this.getDatas(this.doneEvent);
      setTimeout(() => {
        this.showSearch = false;
      }, 600);
    },
    refresh (done) { // 下拉
      this.doneEvent = done;
      this.isPull = true;
      this.pageNum = 1;
      this.loading = true;
      this.getDatas(done);
      this.followInfo();
    },
    infinite (done) { // 上滑
      this.doneEvent = done;
      if (!this.isPull) {
        this.loading = true;
        this.getDatas(done);
      }
    },
    getDatas (done) {
      if (this.loading) {
        let params = {
          page: this.pageNum,
          size: 10
        }
        if (this.nickname) {
          params.nickname = this.nickname;
        }
        this.getFollowBillList(params).then(res => {
          this.loading = false;
          this.searchNoData = false;
          let listData = res.list || [];
          if (listData.length) {
            if (this.isPull) {
              this.isPull = false;
              this.followBillList = [];
            }
            this.pageNum += 1;
            const listDatas = this.followBillList;
            this.followBillList = listDatas.concat(listData);
            if (this.pageNum < res.page.total) {
              done(true);
            } else {
              done(2); ;
            }
          } else {
            if (this.isSearch && !this.followBillList.length) {
              this.searchNoData = true;
              this.isSearch = false;
            }
            done(2);
          }
        });
      }
    },
    followInfo () {
      this.getFollowMemberList({}).then(res => {
        if (res) {
          this.followUserList = res.member_list || [];
        }
      });
    }
  }
}
</script>
<style lang="less">
  .follow-list-container {
    // padding-top: 0.92rem;
    // padding-bottom: 0.2rem;
    background: #f7f7f7;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    .rximg {
      padding: 0 0 0.2rem 0.2rem;
    }
    .searchimg {
      width: 0.4rem;
      height: 0.4rem;
      padding: 0 0 0.2rem 0.2rem;
    }
    .fllow-user-list {
      background: #ffffff;
      padding: 0.15rem 0;
      .user-list {
        position: relative;
        overflow: hidden;
        // height: 0;
        // padding-bottom: 3.2rem;
        min-height: 1.6rem;
        .user-item {
          float: left;
          width: 25%;
          height: 1.6rem;
          text-align: center;
          .info {
            position: relative;
            width: 1rem;
            height: 1rem;
            margin: 0.15rem auto 0.05rem;
            .nums {
              position: absolute;
              right: -0.02rem;
              top: -0.02rem;
              width: 0.28rem;
              height: 0.28rem;
              line-height: 0.28rem;
              font-size: 0.24rem;
              color: #ffffff;
              text-align: center;
              border-radius: 50%;
              background: #D44743;
            }
          }
          .avator {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          .name {
            line-height: 0.36rem;
            font-size: 0.26rem;
            color: #333333;
            text-align: center;
          }
        }
      }
    }
    .follow-infos {
      position: absolute;
      top: 0.92rem;
      bottom: 0;
      width: 100%;
      overflow-y: auto;
    }
    .fllow-list {
      // position: absolute;
      // top: 3rem;
      width: 100%;
      background: #f7f7f7;
      .fllow-item {
        margin-top: 0.2rem;
        background: #ffffff;
        .fllow-info {
          display: flex;
          padding: 0.2rem;
          .avator {
            width: 0.8rem;
            height: 0.8rem;
            margin-right: 0.1rem;
            border-radius: 50%;
          }
          .base-info {
            flex: 1;
            overflow: hidden;
            .info {
              height: 0.36rem;
              line-height: 0.36rem;
              .name {
                font-size: 0.26rem;
                color: #333333;
              }
              .time {
                float: right;
                min-width: 1.8rem;
                font-size: 0.22rem;
                color: #999999;
              }
            }
            .tags {
              margin-top: 0.1rem;
              .icons {
                margin-right: 0.1rem;
                width: 0.3rem;
                height: 0.3rem;
                border-radius: 50%;
              }
              .mode {
                display: inline-block;
              }
              span {
                padding: 0 0.1rem;
                margin-left: 0.06rem;
                height: 0.3rem;
                line-height: 0.3rem;
                font-size: 0.22rem;
                border-width: 0.01rem;
                border-style: solid;
                border-radius: 0.06rem;
              }
              .orange {
                color: #F5A623;
                border-color: #F5A623;
              }
              .red {
                color: #D44743 ;
                border-color: #D44743 ;
              }
              .blue {
                color: #3F8FEB;
                border-color: #3F8FEB;
              }
            }
            .desc {
              margin-top: 0.24rem;
              line-height: 0.36rem;
              font-size: 0.26rem;
              color: #333333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .fllow-detail {
          position: relative;
          display: flex;
          &::before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            top: 0;
            height: 1px;
            border-top: 1px solid #d2d2d2;
            color: #d2d2d2;
            transform-origin: 0 100%;
            transform: scaleY(0.5);
          }
          &::after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            bottom: 0;
            height: 1px;
            border-bottom: 1px solid #d2d2d2;
            color: #d2d2d2;
            transform-origin: 0 100%;
            transform: scaleY(0.5);
          }
          li {
            position: relative;
            flex: 1;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.28rem;
            color: #666666;
            text-align: center;
            &::after {
              content: '';
              display: block;
              position: absolute;
              top: 0;
              right: 0;
              width: 1px;
              height: 0.8rem;
              background: #D2D2D2;
              transform: scaleX(0.5);
            }
            &:last-child::after {
              display: none;
            }
            span {
              color: #D44743;
            }
            .fllow-btn {
              display: inline-block;
              padding: 0 0.4rem;
              height: 0.6rem;
              line-height: 0.6rem;
              font-size: 0.3rem;
              color: #ffffff;
              background: #D44743;
              border-radius: 0.06rem;
            }
          }
        }
      }
    }
    .no-data {
      position: fixed;
      width: 100%;
      // top: 1.92rem;
      top: 0.92rem;
      bottom: 0;
      height: 100%;
      text-align: center;
      background: #ffffff;
      img {
        display: block;
        width: 4.15rem;
        height: 3.22rem;
        margin: 0 auto;
        padding-top: 0.8rem;
      }
      .desc {
        margin-top: 0.3rem;
        font-size: 0.22rem;
        color: #919191;
      }
    }
  }
</style>
